<template>
  <!-- 帮助中心路由 -->
  <div class="help-center">
    <!-- <img src="/helpcenter.svg" /> -->
    <!-- <div class="nav">
      <img src="/favicon.ico" alt="" />
      <div>返回首页</div>
    </div> -->
    <div class="bgc">
      <div>
        <div>KoKo 帮助中心</div>
        <div>
          <input
            type="text"
            placeholder="输入您想搜索的帮助关键词, 比如: 代购是什么?"
          />
          <button>搜索</button>
        </div>
      </div>
    </div>
    <div class="tx_01">
    <el-container>
      <!-- 侧边栏 -->
      <!-- 内联样式记得删除!!!! -->
      <el-aside style="margin-top: 20px;" class="scroll">
        <el-menu  default-active="1-1" class="el-menu-vertical-demo"  :default-openeds="['1', '2', '3', '4', '5']">
          <el-submenu index="1">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px;">帮助中心</span>
            </template>
            <el-menu-item-group >
              <el-menu-item  
              @click="bz_01(item.options,item.hid)"
              style="font-size: 16px;"
              :default-active="`1-${item.hid}`"
               v-for="item in data_01.result" :key="item.hid" :index="`1-${item.hid}`">{{item.options}}</el-menu-item>
              <!-- <el-menu-item index="1-2">选项2</el-menu-item> -->
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px;">常用工具</span>
            </template>
            <!-- <el-menu-item-group>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group> -->
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px;">常见问题</span>
            </template>
            <el-menu-item-group>
              <el-menu-item 
              @click="bz_02(item.options)"
              style="font-size: 16px;" 
              v-for="item in data_02.result" :key="item.hid" :index="`2-${item.hid}`">{{item.options}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px;">用户须知</span>
            </template>
            <el-menu-item-group>
             <el-menu-item 
             @click="bz_03(item.options)"
             style="font-size: 16px;"
              v-for="item in data_03.result" :key="item.hid" :index="`3-${item.hid}`">{{item.options}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <span style="font-weight: bold; font-size: 16px;">物流资讯</span>
            </template>
            <el-menu-item-group>
              <el-menu-item 
              @click="bz_03(item.options)"
              style="font-size: 16px;"
               v-for="item in data_04.result" :key="item.hid" :index="`4-${item.hid}`">{{item.options}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 二级路由根据二级菜单显示不同内容 -->
      <!-- 内联样式记得删除!!!!!!!!! -->
      
    </el-container>
    <div>
          <div class="pb_01">
            <div style=" display: flex;  align-items: center;  border-bottom: 1px solid #ccc ; ">
              <i class="el-icon-location-outline"></i>
               <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>帮助中心首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{options_02}}</el-breadcrumb-item>
                <el-breadcrumb-item>{{options_03}}</el-breadcrumb-item>
              </el-breadcrumb>
              </div>
              <ul class="ej_01">
                <li v-for="item in two_01.result" :key="item.hid">{{item.op_secondary}}</li>
                 <li style="list-style:none;"></li>
              </ul>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       now: 1,
      // 一级选项
      data_01: [],
      data_02: [],
      data_03: [],
      data_04: [],
      // 二级选项
      two_01:[],
      // 选项位置
      options_02:'帮助中心',
      options_03:'售后服务',
    }
  },
  mounted() {
    // 一开始执行一级二级选项
     this.bz_01(this.options_03,1)

    // 点击后页面到顶部
    window.scrollTo(0,0)
    // 获取帮助中心选项
    this.axios.get('/help?options_id=1').then(res=>{
      //  console.log('成功：',res);
       this.data_01=res.data
    })
    // 获取常见问题选项
    this.axios.get('/help?options_id=2').then(res=>{
      //  console.log('成功：',res);
       this.data_02=res.data
    })
    // 获取用户须知选项
    this.axios.get('/help?options_id=3').then(res=>{
      //  console.log('成功：',res);
       this.data_03=res.data
    })
    // 获取物流资讯选项
    this.axios.get('/help?options_id=4').then(res=>{
      //  console.log('成功：',res);
       this.data_04=res.data
    })
  },
  methods: {
    bz_01(e,e2) {
      this.options_02='帮助中心';
      this.options_03=e;
      // 点击后页面到顶部
      window.scrollTo(0,0)
      this.axios.get(`/help_two?hid=${e2}`).then(res=>{
        //  console.log('成功：',res);
         this.two_01=res.data;
      })
      
    },
    bz_02(e) {
      this.options_02='常见问题';
      this.options_03=e;
      // 点击后页面到顶部
      window.scrollTo(0,0)
    },
    bz_03(e) {
      this.options_02='用户须知';
      this.options_03=e;
      // 点击后页面到顶部
      window.scrollTo(0,0)
    },
    bz_04(e) {
      this.options_02='物流资讯';
      this.options_03=e;
      // 点击后页面到顶部
      window.scrollTo(0,0)
    }
    
  },
};
</script>

<style lang="scss">
.el-breadcrumb{
  font-size: 16px;

}
.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  font-weight: 700;
  font-size: 16px;
  color: #ff6e6e;
  cursor: pointer;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner{
  font-weight: 700;
  // color: #303133;
  color: #ff6e6e;
}
 .el-breadcrumb .el-breadcrumb__inner:hover{
  font-weight: 700;
  font-size: 16px;
  color: #ff6e6e;
  cursor: pointer;
 }
.el-icon-arrow-right{
  font-weight: 700;
  color: #303133;
}
 .el-breadcrumb .el-breadcrumb__inner{
     font-weight: 700;
     color: #303133;
  }
   
.el-icon-location-outline{
  font-size: 20px;
  margin: 15px;
}

.el-menu>.el-menu-item-group>ul>.is-active{
   color: #ff6e6e;
}


</style>
<style lang="scss" scoped>
.tx_01{
  width: 1200px;
  display: flex;
  margin: 0 auto;
}
.help-center {
  background-color: #f5f5f5;
}
.el-container,
.nav {
  // margin: 0 auto;
  margin-bottom: 80px;
}
// .nav {
//   display: flex;
//   justify-content: space-between;
//   height: 60px;
//   align-items: center;
//   padding: 0 15px;
//   box-sizing: border-box;
//   background-color: #fff;

//   > img {
//     height: 100%;
//   }

//   > div {
//     color: #333333;
//     cursor: pointer;
//   }
// }
.pb_01{
  width: 875px;
  // height: 10px;
  margin-left: 60px;
  margin-top: 25px;
  padding-bottom: 20px;
  background-color:#fff;
}

// 二级
.ej_01{
 margin-top: 40px;
 margin-left: 70px;
 list-style-type:square ;
 >li{
  margin-top: 20px;
  height:40px;
  width: 100%;
  line-height: 44px;
  cursor: pointer;
 }
 >li:hover{
  color: #ff6e6e;
 }
}

.bgc {
  height: 270px;
  background-image: url("/public/帮助中心背景.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin: 0 auto;

  > div {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    box-sizing: border-box;

    > div:first-child {
      font-size: 50px;
      font-weight: bold;
      color: #f3f3f3;
      margin-bottom: 30px;
    }

    > div:last-child {
      width: 650px;
      height: 40px;
      border-radius: 20px;
      background-color: #fff;
      padding-left: 30px;
      overflow: hidden;
      box-sizing: border-box;

      > input {
        width: 520px;
        height: 100%;
        outline: none;
        border: none;
        padding: 0;
      }

      > button {
        width: 100px;
        height: 100%;
        border: none;
        background-color: #ff6e6e;
        color: #fff;

        &:hover {
          opacity: 0.8;
          cursor: pointer;
        }
      }
    }
  }
}

/*滚动条样式*/
.scroll::-webkit-scrollbar {
  width: 4px;
}
.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>